<template>
	<view class="content">
		<view class="content-title">
			<!-- <h3>账号密码登录</h3> -->
			<u--image :src="src" width="80px" height="80px"></u--image>
		</view>
		<view class="myForm">
			<u--form labelPosition="left" :model="myForm" :rules="rules" ref="uForm">
				<u-form-item label="登录账号" labelWidth="80" prop="username" borderBottom ref="item1">
					<u--input clearable v-model="myForm.username" border="none"></u--input>
					<!-- <u--input v-model="myForm.loginType" value="1" border="none"></u--input> -->
				</u-form-item>
				<u-form-item label="登录密码" labelWidth="80" prop="userInfo.password" borderBottom ref="item2">
					<u--input clearable type="password" v-model="myForm.password" border="none"></u--input>
				</u-form-item>
				<u-form-item class="myBtn">
					<u-button typt="warning" shape="circle" text="登录" @click="login"></u-button>
				</u-form-item>
				<!-- #ifdef APP || APP-PLUS || APP-NVUE -->
				<u-form-item>
					<view class="toRegist">没有账号？<u-link text="立即注册" @click="toRegistPage"></u-link></view>
				</u-form-item>
				<!-- #endif -->
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		doLogin
	} from '@/config/api.js'
	export default {
		data() {
			return {
				src: '/static/myLogo.png',
				myForm: {
					username: '',
					password: '',
					loginType: 1000
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写登录账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写登录密码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			toRegistPage() {
				uni.$u.route('/pages/userCenter/regist');
			},
			login() {
				this.$refs.uForm.validate().then(res => {
					console.log('校验通过')
					doLogin(this.myForm).then((res) => {
						console.log(res)
						if (res.code == 200) {
							this.$store.commit('setUserInfo', res.data);
							uni.$u.route({
								url: '/pages/index/index',
								type: 'reLaunch'
							});
						} else {
							uni.$u.toast(res.msg)
						}
					}).catch((res) => {
						uni.$u.toast(res.msg)
					})
				}).catch(errors => {
					console.log('校验失败')
				})
				
			}
		}
	}
</script>

<style scoped>
	.content {
		margin: auto;
		width: 80%;
		/* border: 3px solid green; */
		padding: 20px;
		align-items: center;
		justify-items: center;
	}

	.content-title {
		margin-top: 40px;
		justify-items: center;
		align-items: center;
		display: block;
		margin: auto;
		width: 20%;
	}

	.myForm {
		margin-top: 60px;
	}

	.myBtn {
		margin-top: 30px;
	}

	.toRegist {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}
</style>